<template>
    <div class="comment-item" :style="{ marginLeft: depth * 30 + 'px' }">
      <div class="comment-header">
        <span class="username">{{ comment.user.username }}</span>
        <span class="time">{{ formatCommentTime(comment.created_at) }}</span>
      </div>
      <div class="comment-content">
        <template v-if="comment.parent">
          @{{ comment.parent.user.username }} 
        </template>
        {{ comment.content }}
      </div>
      <div class="comment-actions">
        <StatItem icon="Star" :value="comment.like_count" @click="handleLike" style="cursor: pointer;"/>
        <el-button v-if="depth < 1" @click="$emit('reply', comment)">{{ activeReplyId === comment.id ? '取消回复' : '回复' }}</el-button>
      </div>
  
      <!-- 当前评论的回复输入框 -->
      <div v-if="activeReplyId === comment.id" class="reply-form">
        <el-input v-model="localReplyContent" />
        <el-button @click="submitReply(comment)">提交</el-button>
      </div>
  
      <!-- 递归显示子评论 -->
      <div class="child-comments">
        <CommentItem
          v-for="child in comment.replies"
            :key="child.id"
            :comment="child"
            :depth="depth + 1"
            :active-reply-id="activeReplyId"
            :reply-content="replyContent"
            :submit-reply="submitReply"
            @reply="$emit('reply', $event)"
            @update:replyContent="$emit('update:replyContent', $event)"
        />
      </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import dayjs from "dayjs";
import StatItem from "/@views/news/component/StatItem.vue";
import { ElMessage } from "element-plus";
import { comment_like } from "/@/api/news";

const emit = defineEmits(['update:replyContent', 'reply'])// 声明emit事件

const props = defineProps({
  comment: Object,
  depth: Number,
  // 添加props类型定义
  replyContent: String,
  activeReplyId: Number,
  submitReply: Function
})

const localReplyContent = computed({
  get: () => props.replyContent,
  set: (value) => emit('update:replyContent', value)
})
// 时间格式化
const formatCommentTime = (time) => {
	return dayjs(time).format('YYYY-MM-DD HH:mm')
}

const handleLike = async () => {
  try {
    const res = await comment_like(props.comment.id)
    props.comment.is_liked = res.data.liked
    props.comment.like_count = res.data.like_count
    ElMessage.success(res.data.liked ? '点赞成功' : '已取消点赞')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}
</script>

<style scoped lang="scss">

.reply-form {
	background: #f8f9fa;
	padding: 10px;
	border-radius: 4px;
	margin: 10px 0;
}

.comment-section {
	border-top: 1px solid #eee;
	padding-top: 30px;

	.comment-item {
		padding: 15px;
		margin: 15px 0;
		background: #f8f9fa;
		border-radius: 4px;

		.comment-header {
			display: flex;
			justify-content: space-between;
			color: #666;
			margin-bottom: 10px;
		}

		.comment-content {
			line-height: 1.6;
			color: #333;
		}

		.comment-actions {
			margin-top: 10px;
			text-align: right;
      .el-button {
       margin-left: 10px;	
      }
		}
	}
}

.child-comments {
  margin-left: 30px;
  border-left: 2px solid #eee;
  padding-left: 15px;

  .child-comment {
    position: relative;
    margin: 10px 0;
    
    &::before {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 10px;
      height: 2px;
      background: #ddd;
    }
  }
}
.child-comments {
  margin-left: 30px;
  border-left: 2px solid #eee;
  padding-left: 15px;

  .child-comment {
    position: relative;
    
    &::before {
      content: "";
      position: absolute;
      left: -15px;
      top: 20px;
      width: 10px;
      height: 2px;
      background: #ddd;
    }
  }

  .child-comments {
    margin-left: 20px;
    border-left: none;
  }
}

.reply-form {
  margin-top: 10px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  display: flex;
  .el-button {
    margin-left: 10px;
  }
}
</style>